<template>
  <h1>Hello Vue3</h1>
  <h2>{{ obj }}</h2>
  <button @click="btn">点击改名</button>
</template>

<script>
/* 
  目标：通过 reactive 函数，把普通对象包装成响应式对象

  🔔 响应式对象特点：数据发生改变，视图也会同步更新

*/
import { reactive } from 'vue'
export default {
  name: 'App',
  setup() {
    // 这是一个普通对象，修改普通对象的值，页面是不会同步更新的❌
    // const obj = {
    //   name: '小明',
    //   age: 18,
    //   gender: '男',
    // }

    // 这是一个响应式对象，修改响应式对象的值，页面同步更新✅
    const obj = reactive({
      name: '小明',
      age: 18,
      gender: '男',
    })

    // 定义的函数，可通过模板的事件触发来调用
    const btn = () => {
      obj.name = '小白'
      console.log(obj)
    }

    // 模板中用到的数据需要 return
    return { obj, btn }
  },
}
</script>

<style></style>
